<template>
  <!-- 出试卷的 -->
  <div class="content-box">
    <!-- 头 -->
    <div class="header">
      <div>新建试卷</div>
      <div @click="submitCreateExanForm()">创建</div>
    </div>

    <!-- 试卷信息 -->
    <div class="exam-info">
      <!-- {{ examData }} -->
      <create-exam-info :examData="examData"></create-exam-info>
    </div>

    <!-- 试卷详细 -->
    <div class="create-topic">

      <!-- 左边题目展示 -->
      <div class="create-left">
        <span class="topic-number">题目数量{{ topicNumber }},满分{{ fullMark }}</span>
        <p class="topic-type-title">单选题：</p>
        <div class="topic-type-list" v-for="(item, index) in examData.papersData.radio" :key="index">
          <img src="/src/assets/svg/delete3.svg" @click="onDeleteTopic(item.type, index)">
          <span @click="alterTopic(item.type, index)">{{ index + 1 }}.{{ item.title }}</span>
        </div>
        <p class="topic-type-title">多选题：</p>
        <div class="topic-type-list" v-for="(item, index) in examData.papersData.checkbox" :key="index">
          <img src="/src/assets/svg/delete3.svg" @click="onDeleteTopic(item.type, index)">
          <span @click="alterTopic(item.type, index)">{{ index + 1 }}.{{ item.title }}</span>
        </div>
        <p class="topic-type-title">简答题：</p>
        <div class="topic-type-list" v-for="(item, index) in examData.papersData.shortAnswer" :key="index">
          <img src="/src/assets/svg/delete3.svg" @click="onDeleteTopic(item.type, index)">
          <span @click="alterTopic(item.type, index)">{{ index + 1 }}.{{ item.title }}</span>
        </div>
      </div>

      <!-- 右边 -->
      <div class="create-right">
        <!-- 题目类型 -->
        <div class="topic-type">
          <span>添加题目</span>
          <button v-for="item in questionType" :key="item" @click="onAddRadio(item)">{{ item }}题</button>
        </div>
        <!-- 题目详细 -->
        <div class="topic-content">

          <template v-for="(item, index) in examData.papersData.radio" :key="index">
            <create-radio :radioData="item" :number="index" v-show="nowShow == index && nowtype == '单选'"></create-radio>
          </template>
          <template v-for="(item, index) in examData.papersData.checkbox" :key="index">
            <create-check-box :checkboxData="item" :number="index"
              v-show="nowShow == index && nowtype == '多选'"></create-check-box>
          </template>
          <template v-for="(item, index) in examData.papersData.shortAnswer" :key="index">
            <create-short-answer :shortAnswerData="item" :number="index"
              v-show="nowShow == index && nowtype == '简答'"></create-short-answer>
          </template>
          <!-- <create-program></create-program> -->
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>

import { computed, ref } from "vue";
import CreateExamInfo from "@/components/exam/CreateExamInfo.vue";
import { openInfo } from "@/utils/openInfo";
// 单选题组件
import CreateRadio from "@/components/exam/CreateRadio.vue";
// 多选题组件
import CreateCheckBox from "@/components/exam/CreateCheckBox.vue";
// 简答题组件
import CreateShortAnswer from "@/components/exam/CreateShortAnswer.vue";
import { ItemGroup } from "ant-design-vue/es/menu";
import CreateProgram from "@/components/exam/CreateProgram.vue";

// 计算题目数量
const topicNumber = computed(() => {
  let number = examData.value.papersData.radio.length + examData.value.papersData.checkbox.length + examData.value.papersData.shortAnswer.length
  return number
})
//计算满分
const fullMark = computed(() => {
  let sum = 0;
  examData.value.papersData.radio.forEach(item => {
    sum += item.score
  });
  examData.value.papersData.checkbox.forEach(item => {
    sum += item.score
  });
  examData.value.papersData.shortAnswer.forEach(item => {
    sum += item.score
  });
  return sum
})

// 完整数据
const examData = ref({
  // examId:1,
  examTitle: '',
  topicNumber: topicNumber,/**题目数量可以计算获取 */
  fullMark: fullMark,/**满分 可以计算来获取 */
  examType: '', /**考试或者习题 */
  astrictTime: null,/**如果是考试就有限制时间 */
  starTime: null,/**开始时间 */
  outTime: null,/**结束时间 */
  papersData: {
    radio: [{
      title: "《山行》是描绘》是描绘了(  )》是描绘了(  )》是描绘了(  )了(  )的景色。",
      type: "单选",
      options: [],
      answer: null,// 答案
      score: 5,
    }, {
      title: "选择题萨达开始建立打开",
      type: "单选",
      options: [],
      answer: null,
      score: 15,
    }],
    checkbox: [{
      title: "选择题萨达开始建立打开",
      type: "多选",
      options: [],
      answer: null,
      score: 5,
    }, {
      title: "选择题萨达开始建立打开",
      type: "多选",
      options: [],
      answer: null,
      score: 5,
    }],
    shortAnswer: [{
      title: "选择题萨达开始建立打开",
      type: "简答",
      options: [],
      answer: null,
      score: 5,
    }, {
      title: "选择题萨达开始建立打开",
      type: "简答",
      options: [],
      answer: null,
      score: 5,
    }],
  }
})
const questionType = ref(['单选', "多选", "简答"])

// 删除题目
function onDeleteTopic(type, index) {
  if (type == '单选') {
    examData.value.papersData.radio.splice(index, 1)
  } else if (type == '多选') {
    examData.value.papersData.checkbox.splice(index, 1)
  } else if (type == '简答') {
    examData.value.papersData.shortAnswer.splice(index, 1)
  } else {
    openInfo("删除失败")
  }
}

// 添加题目
function onAddRadio(type) {
  const topicMode = { title: "", type: type, options: [null], answer: null, score: 5, }
  if (type == '单选') {
    examData.value.papersData.radio.push(topicMode)
  } else if (type == '多选') {
    examData.value.papersData.checkbox.push(topicMode)
  } else if (type == '简答') {
    examData.value.papersData.shortAnswer.push(topicMode)
  } else {
    openInfo("添加题目失败")
  }
}

//当前展示的元素
const nowShow = ref(0)
const nowtype = ref('单选')
// 进入当前编辑题目
function alterTopic(type, index) {
  nowShow.value = index
  nowtype.value = type
}


// 提交表单
function submitCreateExanForm() {
  // 如果是练习，则限制时间为空
  if (examData.value.examType == "练习") {
    examData.value.astrictTime = null
  }
  // 遍历单选题表 验证信息
  
  for (let i = 0; i <examData.value.papersData.radio.length; i++) {
    // console.log("打印序号单选"+[i]);
    // 
     if(examData.value.papersData.radio[i].title ==''){
      openInfo(`第${i+1}题单选题没设置题目`,'error')
      break;
    }else if(examData.value.papersData.radio[i].answer == null){
      openInfo(`第${i+1}题单选题没设置正确答案`,'error')
      break;
    }else {
      for (let j = 0; j < examData.value.papersData.radio[i].options.length; j++) {
        if(examData.value.papersData.radio[i].options[j].text == ''){
          openInfo(`第${i+1}题单选题的第${j+1}个选项为空`,'error')
         return;
        }     
    }
    }
  }
  // openInfo("添加成功"
}

</script>

<style scoped>
/* 最大盒 */
.content-box {
  display: flex;
  flex-direction: column;
}

/* 头部--------------------------------------- */
.header {
  font-size: 25px;
  height: 40px;
  display: flex;
  position: sticky;
  top: 0px;
  /* 元素将粘在页面顶部 */
  z-index: 1000;
  border-radius: 5px;
}

/* 新建试题字样盒子 */
.header div:nth-child(1) {
  font-family: "宋体";
  flex: 6;
  background: linear-gradient(to left bottom,
      rgba(84, 159, 108, 0.8),
      rgba(96, 99, 119, 0.4));
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 完成按钮 */
.header div:nth-child(2) {
  margin-left: 1px;
  font-family: "宋体";
  flex: 1;
  display: flex;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(to left top,
      rgba(96, 99, 119, 0.4),
      rgba(84, 159, 108, 0.8));
  align-items: center;
  transition: background-color 0.5s ease, box-shadow 0.5s ease,
    border-radius 0.3s ease;
}

.header div:nth-child(2):hover {
  background-color: rgba(40, 139, 13, 0.6);
  box-shadow: rgb(140, 135, 135, 0.3) 5px 5px 10px 5px;
  border-radius: 8px;
}

/* 创建题目最大盒子 */
.create-topic {
  display: flex;
}

/* 创建题目盒子左边---------------------- */
.create-left {
  flex: 3;
  border-radius: 10px;
  min-width: 250px;
  border: 1px rgb(149, 108, 79, 0.2) solid;
  margin: 0px 10px 0px 15px;
  padding: 10px;
}

/* 题目简介题目数量 满分 */
.topic-number {
  font-size: 14px;
  font-family: "宋体";
}

/* 题目类型标题 */
.topic-type-title {
  font-size: 16px;
  margin: 10px 0px 0px 0px;
}

/* 题目内容 */
.topic-type-list {
  margin-left: 5px;
  margin-top: 2px;
  display: flex;
}

/* 左边删除图标附近文本 */
.topic-type-list span {
  width: 100%;
  font-family: "仿宋";
  font-size: 15px;
  border-radius: 4px;
  padding: 2px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  /*隐藏超出容器部分的内容 */
  -webkit-box-orient: vertical;
  /**这是 -webkit-line-clamp 正常工作的前提条件之一 */
  text-overflow: ellipsis;
  /**在超出部分显示省略号 */
  -webkit-line-clamp: 1;
  /**设置盒子的方向为垂直 */
  line-clamp: 1;
}

.topic-type-list span:hover {
  background-color: #83bfa5b6;
}

/* 左边删除图标 */
.topic-type-list img {
  cursor: pointer;
  margin-right: 5px;
}

.topic-type-list img:hover {
  transform: scale(1.2);
}

/* 创建盒子右边------------------------------- */
.create-right {
  flex: 8;

  border-radius: 10px;
  margin: 0px 15px 0px 10px;
}

/* 添加题目类型 ---------------------------*/
.topic-type {
  border: 1px rgb(149, 108, 79, 0.2) solid;
  height: 50px;
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  padding-left: 20px;
  align-items: center;
  min-width: 400px;
}

/* 按钮距离 */
.topic-type button {
  margin-left: 15px;
  border: none;
  border-radius: 4px;
  font-family: "幼圆";
  padding: 5px;
  cursor: pointer;
  font-size: 14px;
  background-color: rgb(214, 237, 235, 0.8);
  transition: background-color 0.3s ease-in-out, color 0.3s ease;
}

.topic-type button:hover {
  color: rgb(221, 233, 242);
  background-color: rgba(11, 98, 101, 0.6);
}

/* 题目详细信息 创建单选题  多选题的地方-------------------------------*/
.topic-content {
  border: 1px rgb(149, 108, 79, 0.2) solid;
  border-radius: 10px;
  padding: 15px;
}
</style>